import { isRef, onMounted, ref, unref, watch } from "vue";

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  function doFetch() {
    fetch(unref(url))
      .then((response) => response.json())
      .then((result) => {
        console.log(result);
        data.value = result;
      })
      .catch((err) => {
        error.value = err;
      });
  }

  onMounted(() => {
    // 调接口获取数据
    // url可能是一个 ref 数据, 需要unref操作
    doFetch();
  });

  if (isRef(url)) {
    // 判断 url 是 ref 数据，就要监听它的变化
    watch(url, doFetch);
  }

  return {
    data,
    error,
  };
}

// export function useFetch(url) {
//   const data = ref(null);
//   const error = ref(null);

//   onMounted(() => {
//     // 调接口获取数据
//     // url可能是一个 ref 数据, 需要unref操作

//     fetch(unref(url))
//       .then((response) => response.json())
//       .then((result) => {
//         console.log(result);
//         data.value = result;
//       })
//       .catch((err) => {
//         error.value = err;
//       });
//   });

//   return {
//     data,
//     error,
//   };
// }
